<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../JS/Utils.js"></script>
</head>

<body>

    <div class="div1"></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>

        // style属性只能给dom对象设置行内样式

        // 当有多个div时，这些div属于元素列表，不能同时设置样式，只能一个一个设置样式


        // var divs=document.querySelectorAll("div");
        // divs.forEach(function(item,index){
        //       item.style.width="50px";
        //   })
        // Nodelist自身带fouEach属性，可以通过forEach对列表进行遍历，统一进行设置

        // -----------------------------------------------------------------------------------
        //     第一种写法 对象属性样式写入
        //   div.style.width="50px";
        // 1-设置样式时只能设置非伪类或者伪元素的DOM样式
        // 2-设置样式时，如果样式属性名多个词汇组成 background-color
        //   在这里设置时写为backgroundColor,去掉-并且把-后面的字母变成大写


        // 第二种写法   直接行内样式写入
        //   div.style="width:50px;height:50px;background-color:red";

        // ----------------------------------------------------------------------------------------------------


        //   document.addEventListener("click",clickhander);

        //   function clickhander(e){
        //         console.log(e.x,e.y);
        //   }
        // 页面点击时的点击位置相对窗口的坐标


        // document.addEventListener("click", clickhandler);
        // function clickhandler(e) {
        //     var div = document.createElement("div");
        //     setStyle(div, {
        //         width: "50px",
        //         height: "50px",
        //         backgroundColor: Utils.randomColor(),       连接js调用随机颜色
        //         position: "absolute",
        //         left: e.x - 25 + "px",
        //         top: e.y - 25 + "px"
        //     });
        //     document.body.appendChild(div);
        // }

        // function setStyle(elem, style) {
        //         for (var prop in style) {
        //             elem.style[prop] = style[prop];
        //         }
        //     }

        // 通过传参的方式将div传给elem，将div里的属性传给左边style里的prop，把style这个对象作为属性复制到div的style里
        // 通过 for (var prop in style)进行遍历，将style[prop]里的值赋值

        // ----------------------------------------------------------------------
        //     document.addEventListener("click", clickhandler);
        //     function clickhandler(e) {
        //         var div = document.createElement("div");

        //         Object.assign(div.style, {
        //             width: "50px",
        //             height: "50px",
        //             backgroundColor: Utils.randomColor(1),
        //             position: "absolute",
        //             left: e.x - 25 + "px",
        //             top: e.y - 25 + "px"
        //         })
        //         document.body.appendChild(div);
        //     }


        //     function setStyle(elem, style) {
        //         for (var prop in style) {
        //             elem.style[prop] = style[prop];
        //         }
        //     }

        //    利用 Object.assign 给div和style复制下边所有的内容，和上边一个效果

        // -------------------------------------------------------------------------------


        init();
        function init() {
            document.addEventListener("click", clickhandler);
        }

        function clickhandler(e) {
            Utils.ce("div", {
                width: "50px",
                height: "50px",
                backgroundColor: Utils.randomColor(),
                position: "absolute",
                left: e.x - 25 + "px",
                top: e.y - 25 + "px"
            }, null, ".div1");
        }

        // 将函数封装，调用

        // -----------------------------------------------


        // 可以获取行内样式也可以获取css样式
        // 有兼容问题  IE8及以下没有
        // console.log(getComputedStyle(div1).width)  计算后样式
        // console.log(getComputedStyle(div1).left)

        // 支持IE8游览器但不支持谷歌需要用try进行验证
        // console.log(div1.currentStyle.left);
        // console.log(div1.currentStyle.width);
       
       
        // var style
        // try {
        //     style = getComputedStyle(div1);
        // } catch (e) {
        //     style = div1.currentStyle;
        // }
        // console.log(style.width, style.left);






















    </script>
</body>

</html>